#{extends 'main.html' /} #{set title:'InviteFriend' /}
<head>
<script type="text/javascript">
	$(function(usercurrent) {
		$('#tableInviting').hide();
	});
</script>
<script type="text/javascript">
	function removeEmail(usercurrent) {
		document.getElementById("inviteEmail").value = "";
	}
</script>
<script type="application/javascript"> 
	
	function invitationSending(usercurrent){
		$.getJSON('@{UsersController.invitationSending()}',{
'currentUser':document.getElementById("usercurrentHiddenInput").value,
'eMail':document.getElementById("inviteEmail").value},function(data){
			cancelInviting(usercurrent);
		});
	}
</script>
<script type="text/javascript">
	var status = document.getElementById("status2");
	var email = document.getElementById("inviteEmail");

	function checkEmail2(email) {
		var regularEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
		if (regularEmail.test(email) == false) {
			document.getElementById("status2").src = "../../../public/images/no.png";
		} else {
			document.getElementById("status2").src = "../../../public/images/ok.png";
		}
	}
</script>
<script type="text/javascript">
	function inviteFriend(usercurrent) {
		$('#inviteWithEmail').fadeOut(1000);
		$('#tableInviting').fadeIn(1000);
	}
</script>

<script type="text/javascript">
	function cancelInviting(usercurrent) {
		$('#inviteWithEmail').fadeIn(1000);
		$('#tableInviting').fadeOut(1000);
	}
</script>
</head>
<body>
	<div id="content">
		<input type="button" id="inviteWithEmail" value="Invite Friend"
			onclick="inviteFriend()" />
		<table width="88%" border="1" id="tableInviting">
			<tr>
				<td>Invited email: <input name="inviteEmail" id="inviteEmail"
					value="write the reciver email here!" type="text" size="45"
					onkeyup="checkEmail2(this.value)"
					onmousedown="removeEmail(this.value)" /> <img
					src="../../../public/images/no.png" alt="Status" width="20"
					height="20" id="status2" style="margin-left: 5px;" /> <input
					type="submit" id="inviteBtn" value=" Invite "
					onclick="javascript:invitationSending(document.getElementById('usercurrentHiddenInput').value)" />
					<input type="submit" id="cancelInvitation" value=" Cancel "
					onclick="cancelInviting()" /></td>
			</tr>
		</table>
	</div>
	<input id="usercurrentHiddenInput" type="hidden" value="${usercurrent}" />
	<div id="sidebar"></div>

</body>
